<template>
  <view class="bg">
    <Address  @changeCity="changeCity"/>
    <Search @dokeyWord="dokeyWord"/>
    <Swiper />
    <view class="loan-item" v-for="(item, index) in loanList" :key="index" @tap="toDetail(item)">
      <view class="loan-item-head">
        <view class="loan-item-head-left">
          <view class="loan-item-logo">
            <image :src='item.corporationImgUrl'></image>
          </view>
          <view class="loan-item-title">
            <text class="loan-item-title-text">{{ item.productName }}</text>
            <text class="loan-item-title-desc">{{ item.productSlogan }}</text>
          </view>
        </view>
        <view class="loan-item-head-right">
          信用卡
        </view>

      </view>
      <view class="loan-item-content">
        <view class="loan-item-img">
          <image :src='item.imgUrl'></image>
        </view>
        <view class="loan-item-detail">
          <text>卡片权益：{{ item.productContent }}</text>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
import prodApi from "@/api/prodApi";
import passData from "@/api/requstUtil";
import Search from "./Search"
import Swiper from "./Swiper"
import Address from "./Address"
export default {
  components:{
    Search,
    Swiper,
    Address
  },
  data() {
    return {
      queryParam: {
        productType: 'CREDIT'
      },
      loanList: [
        {
          title: '标题-标题1111',
          titleDesc: '标题描述',
          logo: 'LOGO',
          quotaNum: '200',
          rate: '7.2%-22.3%',
          periods: '3-24期',
          feepayType: '等额本息、先息后本',
          productType: '保单贷', // 产品名称
          maxCanLoan: 50, // 最高可贷额度
          // desc: '审批快，80%通过率通过率!', //描述
        }, {
          title: '标题-标题1111',
          titleDesc: '标题描述标题描述标题描述',
          logo: 'LOGO',
          quotaNum: '200',
          rate: '7.2%-22.3%',
          periods: '3-24期',
          feepayType: '等额本息、先息后本',
          productType: '保单贷', // 产品名称
          maxCanLoan: 50, // 最高可贷额度
          // desc: '审批快，80%通过率通过率!', //描述
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    dokeyWord(data) {
      console.log('信用卡',data)
    },
    changeCity(data) {
     console.log('贷款地址', data)
    },
    getList() {
      prodApi.queryList(this.queryParam).then(res => {
        this.loanList = (passData(res) || {}).list;
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/index/product/CardDetail',
        success: (res) => {
          res.eventChannel.emit('getItem', item)
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

.loan-item {
  height: 120px;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;

  .loan-item-img {
    uni-image {
      width: 150px;
      height: 65px;
    }
  }

  .loan-item-head {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 3px;
    margin-left: 6px;

    .loan-item-head-left {
      display: flex;

      .loan-item-logo {
        uni-image {
          width: 45px;
          height: 45px;
        }
      }
    }

    .loan-item-head-right {
      color: #f17a7a;
      padding-right: 12px;
    }
  }


  .loan-item-title {
    display: flex;
    flex-direction: column;

    .loan-item-title-text {
      font-weight: bold;
      color: #000000;
    }

    .loan-item-title-desc {
      background-color: #fef3e4;
      color: #f08163;
      width: fit-content;
      padding: 2px;
    }
  }

  .loan-item-content {
    display: flex;
  }

  .loan-item-detail {
    font-size: 14px;
    color: #aaaaaa;
    display: flex;
    flex-direction: column;
  }
}


</style>
